@import url(./index.css);
@import url(./header.css);
@import url(./footer.css);

body {
    background-image: url(../images/index-top-background.png);
    background-repeat: no-repeat;
    background-size: 100vw cover;
    background-color: #71C4CC;
}

.menu {
    margin: 17rem 112rem 20rem;
}

.menu .menu-item {
    padding: 28rem 19rem;
    background-size: 100% 100%;
    margin-right: 15rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.menu .menu-item img {
    width: 64rem;
    height: 64rem;
    display: block;
    margin-right: 22rem;
}

.menu .menu-item .title {
    color: #333;
    font-size: 20rem;
    font-weight: bold;
}

.menu .menu-item .label {
    color: #989696;
    font-size: 15rem;
}

.menu .menu-item:nth-of-type(1) {
    background-image: url(../images/home_menu/index-top-bg1.png);
}

.menu .menu-item:nth-of-type(2) {
    background-image: url(../images/home_menu/index-top-bg2.png);
}

.menu .menu-item:nth-of-type(3) {
    background-image: url(../images/home_menu/index-top-bg3.png);
}

.menu .menu-item:nth-of-type(4) {
    background-image: url(../images/home_menu/index-top-bg4.png);
}

.menu .menu-item:nth-of-type(5) {
    background-image: url(../images/home_menu/index-top-bg5.png);
}

.menu .menu-item:nth-of-type(6) {
    background-image: url(../images/home_menu/index-top-bg6.png);
    margin-right: 0;
}

.main {
    margin: 0 112rem;
}

.aside {
    width: 416rem;
}

.user-info {
    background-color: #F8FAFC;
    border-radius: 14rem;
    padding: 29rem 27rem 42rem;
    background-image: url(../images/index-user-info-bg.png);
    background-size: 100% 100%;
}

.user-info .avatar {
    width: 57rem;
    height: 57rem;
    display: block;
    margin-right: 12rem;
}

.user-info .user-name {
    font-size: 16rem;
    color: #333;
    font-weight: bold;
}

.user-info .label {
    padding: 5rem 0 0;
    color: #999;
    font-size: 12rem;
}

.user-info .item {
    width: 135rem;
    height: 44rem;
    border-radius: 6rem;
    text-align: center;
    line-height: 44rem;
    margin: 14rem 9rem 0 0;
    font-size: 14rem;
    font-weight: bold;
    cursor: pointer;
}

.user-info .sign-btn {
    background: #BFE6F5;
}

.user-info .test-btn {
    background: #DFD9FF;
}

.user-info .card {
    background: linear-gradient(135deg, #F5F8FF 0%, #D8E4FC 54%, #F7FDFF 100%);
    padding: 20rem 27rem;
    border-radius: 14rem;
    box-shadow: 0rem 0rem 8rem 11rem rgba(176, 192, 249, 0.1);
    margin: 20rem 0 6rem;
}

.user-info .card span {
    font-weight: bold;
}

.user-info .card .card-item {
    border-right: 1rem solid #BFCFEF;
}

.card-item .time {
    font-weight: bold;
}

.user-info .card .card-item:nth-of-type(1) {
    flex: .6;
    min-width: 1rem;
}

.user-info .card .card-item:nth-of-type(2),
.user-info .card .card-item:nth-of-type(3) {
    text-align: center;
    flex: 1;
    min-width: 1rem;
}

.user-info .card .card-item:nth-of-type(3) {
    border-right: none;
    flex: .7;
    min-width: 1rem;
}

.article {
    background: #F8FAFC;
    border-radius: 14rem;
    padding: 17rem 27rem 27rem;
}


.subscription {
    margin: 20rem 0;
}

.article .title {
    font-size: 20rem;
    font-weight: bold;
    position: relative;
    padding-left: 14rem;
}

.article .title::after {
    content: "";
    position: absolute;
    width: 4rem;
    height: 21rem;
    background: #576FFA;
    border-radius: 2rem;
    left: 0;
    top: calc(50% - 10.5rem);
}

.article .row {
    padding: 16rem 0 0;
    font-size: 14rem;
    cursor: pointer;
    /* transition: .3s ease all; */
}

.article .row .time {
    font-size: 12rem;
    padding: 5rem 0 0;
    color: #8B96AB;
}

.article .no-more {
    color: #8B96AB;
    padding: 31rem 0 5rem;
    text-align: center;
}

.content {
    background: #F8FAFC;
    max-height: 816rem;
    margin-left: 33rem;
    border-radius: 14rem;
    padding: 33rem 30rem;
    display: none;
    /* overflow: hidden; */
}

.content>.title,
.content>.flex-column>.title {
    font-size: 20rem;
    font-weight: bold;
    position: relative;
    padding-left: 14rem;
}

.content>.title::after,
.content>.flex-column>.title::after {
    content: "";
    position: absolute;
    width: 4rem;
    height: 21rem;
    background: #576FFA;
    border-radius: 2rem;
    left: 0;
    top: calc(50% - 10.5rem);
}

.content>.search,
.content>.flex-column>.search,
.autonomously-mask>.dcl>.search {
    width: 100%;
    border-radius: 6rem;
    border: 3rem solid #576FFA;
    padding: 19rem 25rem 18rem;
    margin: 34rem 0 0;
}

.content>.search::placeholder,
.content>.flex-column>.search::placeholder,
.autonomously-mask>.dcl>.search::placeholder {
    color: #7988A4;
}

.content>.box {
    position: relative;
}

.box-menu {
    padding: 107rem 0 0;
}

.subscription-box>.title {
    color: #384052;
    font-weight: bold;
    margin: 30rem 0 0;
}

.subscription-box>.subscription-menu {
    padding: 25rem 0 15rem;

}

.subscription-box>.subscription-menu>.subscription-item {
    color: #878C97;
    background: rgba(255, 255, 255, 1);
    border: 1rem solid #97A5B7;
    border-radius: 4rem;
    padding: 5rem 38rem;
    margin: 5rem;
    cursor: pointer;
}

.subscription-box>.subscription-list {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    margin: 0 0 30rem;
}

.subscription-box>.subscription-list::-webkit-scrollbar {
    height: 0;
}

.subscription-box>.subscription-list::scrollbar {
    height: 0;
}

.subscription-box>.subscription-list>div {
    margin-right: 47rem;
    padding: 0 0 10rem;
    cursor: pointer;
    display: inline-block;
}

.subscription-box>.subscription-list .active {
    color: #576FFA;
    position: relative;
    font-weight: bold;
}

.subscription-box>.subscription-list .active::after {
    content: "";
    width: 30rem;
    height: 2rem;
    background-color: #576FFA;
    position: absolute;
    bottom: 0;
    left: calc(50% - 15rem);
}

.subscription-card-wrap {
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: 400rem;
}

.subscription-card-wrap::-webkit-scrollbar {
    width: 0;
}

.subscription-card-wrap::scrollbar {
    width: 0;
}

.subscription-box .subscription-card {
    width: 181rem;
    height: 80rem;
    padding: 10rem 30rem;
    cursor: pointer;
    background: linear-gradient(134deg, #878C97 0%, #5F6574 100%);
    margin: 10rem 10rem 0 0;
    position: relative;
}

.subscription-box .subscription-card .iconfont {
    color: #fff;
    position: absolute;
    right: 5rem;
    bottom: 5rem;
}

.subscription-box .subscription-success {
    border-radius: 10rem;
    background: linear-gradient(134deg, #1e9633 0%, #22a890 100%);
}

.subscription-box .subscription-success .iconfont {
    display: block;
}

.subscription-card>.icon {
    width: 49rem;
    height: 49rem;
    margin-right: 15rem;
}

.box-menu>.menu-bg {
    display: block;
    position: relative;
    z-index: 2;
    width: 550rem;
    height: 474rem;
    margin: 0 auto;
}

.box>.tag {
    position: absolute;
    width: 376px;
    background: #F0F5FF;
    border-radius: 7rem;
    border: 1rem solid #CECECE;
    padding: 20rem 29rem;
    font-size: 18rem;
    overflow: hidden;
    color: #767676;
}

.box>.tag::after {
    content: "";
    width: 20rem;
    height: 40rem;
    background-color: #576FFA;
    position: absolute;
}

.box>.tag span {
    font-weight: bold;
    color: #333;
    cursor: pointer;
}

.box>.tag.tag-lt {
    top: 157rem;
    left: calc(50% - 486rem);
}

.box>.tag.tag-lt::after,
.box>.tag.tag-lb::after {
    left: -5rem;
    top: -20rem;
    transform: rotate(45deg);
}

.box>.tag.tag-lb {
    top: 291rem;
    left: calc(50% - 442rem);
}

.box>.tag.tag-rt {
    top: 128rem;
    right: 198rem;
    text-align: right;
    padding-right: 82rem;
}

.box>.tag.tag-rb {
    top: 258rem;
    right: 155rem;
    text-align: right;
}

.box>.tag.tag-rt::after,
.box>.tag.tag-rb::after {
    right: -5rem;
    top: -20rem;
    transform: rotate(-45deg);
}


/* 首页弹窗公共样式 */
.choise,
.review-container,
.vocabulary,
.sequence,
.intensify,
.competition,
.dcl,
.dcl-reslut {
    width: 1220rem;
    height: 840rem;
    background: linear-gradient(135deg, #E8F3F4 0%, #E1EEF6 37%, #FFFFFF 100%);
    border-radius: 10rem;
    position: absolute;
    left: calc(50% - 610rem);
    top: calc(50% - 420rem);
    padding: 0 50rem 10rem;
    transform: scale(.4);
    animation: choiseScale .6s forwards;
}

.review-container,
.sequence,
.intensify,
.competition,
.dcl,
.dcl-reslut {
    background: #fff;
    padding: 0 30rem 10rem;
}

.sequence,
.intensify {
    height: 804rem;
}

.choise>.title,
.review-container>.title,
.vocabulary>.title,
.sequence>.title,
.intensify>.title,
.competition>.title,
.dcl>.title,
.dcl-reslut>.title {
    height: 61rem;
    background: rgba(113, 196, 204, 1);
    border-radius: 10rem 10rem 0 0;
    margin: 0 -50rem;
    color: #13334C;
}

.vocabulary,
.dcl,
.dcl-reslut {
    padding: 0 35rem 10rem;
    background: #fff !important;
}

.vocabulary>.title,
.dcl>.title,
.dcl-reslut>.title {
    margin: 0 -35rem;
}

.sequence>.title,
.intensify>.title,
.competition>.title {
    margin: 0 -30rem;
}

/* 选课中心 */
.choise>.input-row {
    padding: 50rem 0 0;
}

.input-row .choise-input {
    background-color: #fff;
    line-height: 1;
    padding: 21rem 20rem 20rem;
    border-radius: 6rem;
    border: 2rem solid #BAC6FD;
    outline: none;
}

.input-row .choise-input::placeholder {
    color: #999;
}

.input-row .choise-btn {
    width: 312rem;
    height: 50rem;
    background: rgba(87, 111, 250, 1);
    border-radius: 10rem;
    border: none;
    margin-left: 20rem;
    color: #fff;
}

.choise>.choise-menu {
    padding: 21rem 0 30rem;
}

.choise .choise-menu-item {
    /* width: 134rem; */
    height: 30rem;
    background: rgba(255, 255, 255, 1);
    border: 1rem solid #878C97;
    color: #878C97;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 4rem;
    margin-right: 10rem;
    margin-top: 10rem;
    font-size: 14rem;
    padding: 0 6rem;
}

.choise-menu>.choise-menu-active {
    background-color: #576FFA;
    border-color: #576FFA;
    color: #fff;
}

.choise .column {
    width: 340rem;
    height: 430rem;
    background: linear-gradient(138deg, #F9F9F9 0%, rgba(217, 229, 252, 0.6) 35%, rgba(217, 229, 252, 0.6) 65%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    border-radius: 10rem;
}

.column .title {
    padding: 20rem 20rem 10rem;
    color: #7B6C5C;
}

.column-wrap {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}

.column-wrap::-webkit-scrollbar {
    width: 0;
}

.column-wrap::scrollbar {
    width: 0;
}

.column .column-row {
    padding: 11rem 20rem 10rem;
    color: #878C97;
    cursor: pointer;
}

.column .column-active {
    background-color: #576FFA;
    color: #fff;
    position: sticky;
    top: 0;
}

.column-menu {
    margin-left: 30rem;
}

.column-menu>.column-value {
    overflow-x: hidden;
    overflow-y: scroll;
    max-height: 400rem;
}

.column-menu>.column-value::-webkit-scrollbar {
    width: 0;
}

.column-menu>.column-value::scrollbar {
    width: 0;
}

.column-value>.column-box {
    background-image: url(../images/material-bg.png);
    background-size: 193rem 191rem;
    background-repeat: no-repeat;
    padding: 0 0 10rem;
}

.column-value>.column-box>.value {
    width: 193rem;
    height: 191rem;
    padding: 48rem 50rem 75rem;
    color: #6A5D5A;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.column-menu .label {
    color: #13334C;
    padding: 10rem 0 0;
}

.column-menu .label>span {
    color: #FD5F00;
    padding: 0 4rem;
}

.column-menu .column-btn {
    width: 118rem;
    height: 40rem;
    background: rgba(87, 111, 250, 1);
    border-radius: 10rem;
    border: none;
    color: #fff;
    font-size: 16rem;
    cursor: pointer;
    margin: 9rem auto 0;
}


/* 智能复习 */

.review-container>.title {
    margin: 0 -30rem;
}

.review-header {
    padding: 30rem 0 0;
}

.review-header>.icon {
    width: 30rem;
    height: 30rem;
    margin-right: 20rem;
    cursor: pointer;
}

.l-switch {
    position: relative;
    width: 45rem;
    height: 18rem;
    background-color: #f5f5f5;
    border-radius: 10rem;
    transition: .3s ease all;
    margin-left: 20rem;
    margin-right: 30rem;
}

.switch-circle {
    background-color: #ccc;
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    cursor: pointer;
    transition: .3s ease all;
    position: absolute;
    top: -1rem;
    left: 0;
}

.l-switch[data-checked=true]>.switch-circle {
    left: 25rem;
    background-color: #576FFA;
}

.review-container .lltuichu {
    color: #5F6574;
    font-size: 30rem;
    margin-left: 10rem;
    cursor: pointer;
}

.review-wrap {
    /* overflow: hidden; */
    display: none;
}

/* .review-mask {
    display: block;
}
.review-wrap[data-key='-1'] {
    display: block;
} */

.review-wrap .start-card {
    width: 826rem;
    height: 306rem;
    border: 1rem solid #FFFFFF;
    background: linear-gradient(135deg, #FFFFFF 0%, #ECF3FF 46%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    border-radius: 10rem;
    margin: 101rem auto 60rem;
    font-size: 30rem;
    position: relative;
}

.before-dot {
    position: relative;
    line-height: 42rem;
}

.review-wrap .start-card::before,
.before-dot::before {
    content: "·";
    font-size: 60rem;
}

.review-wrap[data-key='-1'] .start-card::before {
    content: "";
}

.review-wrap[data-key='-1'] .label-force {
    position: absolute;
    right: 22rem;
    bottom: 11rem;
}

.review-wrap .start-btn {
    width: 400rem;
    height: 50rem;
    background: rgba(87, 111, 250, 1);
    border-radius: 10rem;
    border: none;
    display: block;
    color: #fff;
    margin: 0 auto;
    cursor: pointer;
}

.review-value-start {
    margin-right: 20rem;
}

.review-articulate .play-icon {
    margin-left: 10rem;
    width: 20rem;
    height: 16rem;
}

.review-articulate .play-icon-left {
    margin-right: 30rem;
}

.review-star {
    position: relative;
}

.review-star>.iconfont {
    font-size: 54rem;
    margin: 50rem 15rem;
    cursor: pointer;
    color: #373F51;
}

.star-animation>.iconfont {
    animation: starScaleRoate .5s;
    transform: scale(.4);
    animation-fill-mode: forwards;
}

.star-animation>.iconfont:nth-child(2) {
    animation-delay: .07s;
}

.star-animation>.iconfont:nth-child(3) {
    animation-delay: .14s;
}

.star-animation>.iconfont:nth-child(4) {
    animation-delay: .21s;
}

.star-animation>.iconfont:nth-child(5) {
    animation-delay: .28s;
}

@keyframes starScaleRoate {
    0% {
        transform: scale(.4) rotate(-0deg);
    }

    50% {
        transform: scale(1.1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.progress-container {
    width: 90rem;
    height: 90rem;
    position: relative;
    margin-bottom: 20rem;
}

.progress-container .progress-circle {
    transform: rotate(-90deg);
    height: 100%;
    width: 100%;
}

.progress-container .progress-bg {
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 5;
}

.progress-container .progress-value {
    width: 56rem;
    height: 56rem;
    border-radius: 50%;
    position: absolute;
    left: 17rem;
    top: 17rem;
    background-color: #E0EFF2;
    margin: 0 !important;
    font-size: 55rem !important;
}

.progress-container .progress-fill {
    fill: none;
    stroke: #576FFA;
    stroke-width: 5;
    stroke-dasharray: 339.292;
    /* 圆周长 (2 * π * 半径) */
    stroke-dashoffset: 0;
    animation: progressAnimation 3s linear forwards;
}

@keyframes progressAnimation {
    0% {
        stroke-dashoffset: 339.292;
    }

    100% {
        stroke-dashoffset: 0;
    }
}




.reivew-success-icon {
    width: 35rem;
    height: 40rem;
    position: absolute;
    right: 240rem;
    top: calc(50% - 20rem);
    cursor: pointer;
}

.review-wrap .review-articulate {
    padding: 20rem 0;
}

.review-star>.iconfont.lla-duobianxing1 {
    color: #576FFA;
}

.review-ing .tips,
.review-recording .tips {
    margin: 50rem 0 49rem;
}

.review-success .tips {
    margin: 0rem 0 30rem;
}

.review-action {
    text-align: center;
    position: relative;
}

.review-action .item {
    cursor: pointer;
}

.review-action .iconfont {
    color: #BFE6F5;
    font-size: 40rem;
    margin: 0 50rem 20rem;
}

.review-action .iconfont.llluyinceping {
    font-size: 60rem;
    color: #576FFA;
}

.review-action .iconfont.llluyinceping2 {
    color: #E8A8A8;
    font-size: 60rem;
}

.review-action .review-change {
    position: absolute;
    bottom: 0;
    right: -140rem;
}

.review-action .recording-card {
    width: 267rem;
    height: 118rem;
    border: 1rem solid #FFFFFF;
    background: linear-gradient(135deg, #FFFFFF 0%, #ECF3FF 52%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    border-radius: 10rem;
    position: absolute;
    bottom: 26rem;
    right: -320rem;
    padding: 29rem 22rem 10rem 32rem;
}

.review-action .recording-card>div:nth-of-type(1) {
    margin-bottom: 10rem;
}

.review-action .recording-card .recording-stop {
    width: 121rem;
    height: 30rem;
    background: rgba(87, 111, 250, 1);
    color: #fff;
    margin: 0 0 0 20rem;
    line-height: 30rem;
}

.review-action .iconfont.llxiayige {
    color: #576FFA;
}

.review-action .icon-recording {
    display: block;
    height: 90rem;
    width: 90rem;
    margin: 0 20rem 18rem;
}

.review-footer {
    background-color: #ECF3FF;
    height: 40rem;
    border-radius: 0 0 10rem 10rem;
    margin: 0 -30rem -10rem;
    padding: 0 30rem;
}

.review-footer .label-right {
    margin-left: auto;
}

.review-footer .label {
    margin-left: 30rem;
}

.review-ing .review-ing-show,
.review-success .review-success-show,
.review-recording .review-recording-show {
    display: block;
}

.review-ing .review-success-show,
.review-ing .review-recording-show,
.review-success .review-ing-show,
.review-success .review-recording-show,
.review-recording .review-success-show,
.review-recording .review-ing-show {
    display: block;
}

.reivew-card-box {
    width: 350rem;
    margin: 83rem 0 0;
}

.reivew-card-box .review-card {
    border: 1rem solid #FFFFFF;
    background: linear-gradient(133deg, #F9F9F9 0%, #ECF3FF 49%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    padding: 30rem 30rem 18rem;
    border-radius: 10rem;
}

.reivew-card-box .review-card:nth-child(n + 2) {
    margin-top: 20rem;
}

.review-card-row {
    position: relative;
    padding: 0 0 12rem 16rem;
}

.review-card-row::before {
    content: "";
    position: absolute;
    width: 8rem;
    height: 8rem;
    background-color: #BFE6F5;
    border-radius: 50%;
    top: 6rem;
    left: 0;
}

.review-card-row .iconfont {
    margin-left: 10rem;
    cursor: pointer;
}

.review-end-box {
    width: 305rem;
    height: 392rem;
    background-image: url(../images/icon/review-end.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 83rem 0 0;
    margin-left: 148rem;
}

.review-end-box .start-btn {
    width: 135rem;
    height: 44rem;
    background-color: transparent;
    border: none;
    margin: 0 5rem;
    border-radius: 8rem;
    cursor: pointer;
}

.review-end-box .start-btn:nth-child(1) {
    margin-left: 22rem;
}


/* 单词本 */
.vocabulary-mask {
    /* display: block; */
}

.vocabulary-search {
    border-radius: 4rem;
    border: 3rem solid #576FFA;
    padding: 13rem 20rem;
    margin: 30rem 0 0;
}

.vocabulary-search>.radio {
    width: 18rem;
    height: 18rem;
    display: block;
    cursor: pointer;
    background-color: transparent;
}

.vocabulary-search>.radio-value {
    cursor: pointer;
    padding: 0 30rem 0 10rem;
}

.vocabulary-search>select {
    margin-left: 20rem;
    margin-right: 30rem;
    border: none;
    color: #373F51;
    background-color: transparent !important;
}

.vocabulary-search>.rest-btn {
    border-radius: 4rem;
    background-color: #576FFA;
    color: #fff;
    padding: 6rem 20rem;
    cursor: pointer;
    margin-right: 28rem;
}

.vocabulary-search>.tag {
    width: 62rem;
    height: 26rem;
    border-radius: 3rem;
    margin: 0 5rem;
    text-align: center;
    line-height: 26rem;
    color: #fff;
    cursor: pointer;
}

.bg-e8a8 {
    background-color: #E8A8A8;
}

.bg-90d5 {
    background-color: #90D5DD;
}

.bg-a6d6 {
    background-color: #A6D6F6;
}

.vocabulary-no-more {
    padding: 110rem 0 0;
    text-align: center;
}

.vocabulary-no-more>img {
    width: 243rem;
    height: 253rem;
    display: block;
    margin: 0 auto 60rem;
}

.vocabulary-no-more>.tips {
    background-color: #ECF3FF;
    color: #576FFA;
    padding: 5rem 76rem;
}

.vocabulary-wrap {
    margin: 30rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 20rem;
    grid-column-gap: 20rem;
    overflow-x: hidden;
    overflow-y: scroll;
}

.vocabulary-wrap::-webkit-scrollbar {
    width: 0;
}

.vocabulary-wrap::scrollbar {
    width: 0;
}

.vocabulary-card-wrap {
    height: 160rem;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

.vocabularyRotate {
    transform: rotateY(180deg);
    transition: transform 1s;
    /* 添加过渡效果 */
}

.vocabulary-card {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10rem;
    width: 100%;
    height: 160rem;
    border-radius: 10rem;
    background: linear-gradient(133deg, #C1E6FF 0%, #A6D6F6 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    backface-visibility: hidden;
    /* 隐藏背面 */
}

.vocabulary-card-reverse {
    transform: rotateY(180deg);
}

.vocabulary-card>.tips {
    padding: 5rem 0 18rem;
}

.vocabulary-card>.iconfont {
    cursor: pointer;
}

.vocabulary .paging {
    padding: 0 0 42rem;
    position: relative;
}

.vocabulary .paging .label {
    color: #878C97;
    margin: 0 5rem;
    cursor: pointer;
}

.vocabulary .paging .dot {
    color: #878C97;
    margin: 0 5rem;
    background-color: #D7D9DC;
    padding: 3rem 7rem;
    text-align: center;
    min-width: 23rem;
    border-radius: 4rem;
    cursor: pointer;
}

.vocabulary .paging .dot-active {
    color: #fff;
    background-color: #576FFA;
}

.vocabulary .paging>.tips {
    color: #71C4CC;
    position: absolute;
    right: 0;
    top: calc(50% - 30rem);
}

/* 测评分析 */
.analyze-mask {
    /* display: block; */
}

.exam-analyze {
    width: 1220rem;
    min-height: 689rem;
    background-color: #fff;
    border-radius: 10rem;
    position: absolute;
    left: calc(50% - 610rem);
    top: calc(50% - 420rem);
    padding: 0 50rem 10rem;
    transform: scale(.4);
    animation: choiseScale .6s forwards;
}

.exam-analyze>.title {
    height: 61rem;
    background: rgba(113, 196, 204, 1);
    border-radius: 10rem 10rem 0 0;
    margin: 0 -50rem;
    color: #13334C;
}

.analyze-value {
    text-align: center;
    padding: 30rem 0 10rem;
}

.analyze-card {
    width: 929rem;
    height: 273rem;
    border: 1rem solid #FFFFFF;
    background: linear-gradient(135deg, #FFFFFF 0%, #ECF3FF 46%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    border-radius: 10rem;
    margin: 20rem auto 0;
    padding: 10rem 32rem;
}

.analyze-card>.title {
    text-align: center;
}

.pronounce-wrap {
    padding: 23rem 0 20rem;
}

.pronounce {
    background-color: #BFE6F5;
    width: 320rem;
    height: 14rem;
    border-radius: 7rem;
    padding: 0 11rem;
    margin-left: 10rem;
}

.pronounce>.lla-zu2629,
.pronounce>.lllaba {
    transform: scale(.5);
    cursor: pointer;
    color: #71C4CC;
}

.pronounce>.time {
    margin-left: 5rem;
}

.pronounce-box {
    margin: 0 5rem 0 5rem;
}

.pronounce-value {
    height: 4rem;
    background-color: #71C4CC;
    border-radius: 2rem;
    width: 100%;
}

.exam-analyze-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 20rem;
    grid-column-gap: 20rem;
}

.analyze-row {
    text-align: center;
}

.analyze-row>div:nth-of-type(2) {
    padding: 4rem 0 0;
}

.row-line {
    position: relative;
    display: inline;
    margin: 0 0 10rem;
}

.row-line::after {
    content: "";
    width: 140%;
    border-bottom: 1px solid transparent;
    position: absolute;
    left: -20%;
    bottom: 0;
}

.analyze-row[data-key] .row-line {
    margin: 0 20rem;

}

.analyze-row[data-key] .row-line::after {
    min-width: 40rem;
    left: calc(50% - 20rem);
}

.row-line-success::after {
    border-color: #576FFA;
}

.row-line-col::after {
    border-color: #71C4CC;
}

.row-line-err::after {
    border-color: #E8A8A8;
}

.exam-analyze-content .exam-tips {
    padding: 11rem 0;
}

.exam-analyze-content .exam-tips {
    margin: 0 6rem;
}

.exam-analyze-content>.item {
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

.exam-analyze-content>.item::-webkit-scrollbar {
    width: 0;
}

.exam-analyze-content>.item::scrollbar {
    width: 0;
}

.exam-analyze-content>.item>div {
    padding: 20rem 5rem 0 0;
}

.analyze-submit {
    width: 135rem;
    height: 44rem;
    border: 1rem solid #97A5B7;
    border-radius: 6rem;
    background-color: #fff;
    text-align: center;
    line-height: 44rem;
    cursor: pointer;
    display: block;
    margin: 30rem auto;
}

/* 词汇量测试 */
.report-no-more {
    width: 314rem;
    height: 286rem;
    display: block;
    margin: 100rem auto 90rem;
}

.vocabulary-test-start {
    width: 400rem;
    height: 50rem;
    border: none;
    border-radius: 10rem;
    display: block;
    color: #fff;
    text-align: center;
    line-height: 50rem;
    margin: 0 auto 24rem;
    background-color: #576FFA;
    cursor: pointer;
}

/* 学习报告 */
.report-chart-footer {
    width: 100%;
}

.report-chart-footer>.iconfont {
    margin-left: 40rem;
    cursor: pointer;
}

/* 顺序拼写 */
.sequence-mask-first {
    /* display: block; */
}

.sequence .sequence-header-line {
    height: 4rem;
    background-color: #ECF3FF;
    border-radius: 10rem;
    margin: 10rem 0 0;
}

.sequence-header-line>.value {
    height: 4rem;
    width: 50%;
    background-color: #576FFA;
    border-radius: 10rem;
}

.sequence .menu-title {
    text-align: center;
    padding: 78rem 0 0;
}

.sequence .word-hidden {
    padding: 40rem 0;
    height: 120rem;
}

.sequence .word-hidden .btn {
    width: 140rem;
    height: 40rem;
    text-align: center;
    line-height: 40rem;
    color: #7B6C5C;
    margin-right: 20rem;
    background-color: #ECF3FF;
}

.sequence .lla-zu1177,
.sequence .llzhengque2,
.sequence .llcuowu {
    line-height: 60rem;
}

.sequence .llzhengque2,
.sequence .llcuowu {
    margin-left: 20rem;
}

.sequence .search-wrap {
    width: 624rem;
    margin: 0 0 0 20rem;
}

.sequence .search-wrap>.search {
    width: 100%;
    border: 2rem solid #576FFA;
    border-radius: 10rem;
    outline: none;
    height: 60rem;
    padding: 0 16rem;
}

.sequence .search-btn {
    width: 154rem;
    height: 50rem;
    background: rgba(87, 111, 250, 1);
    border-radius: 10rem;
    border: none;
    display: block;
    margin: 5rem 0 0;
    cursor: pointer;
    color: #fff;
    margin-left: 34rem;
}

.search-wrap .tips {
    padding: 20rem 0 0;
}

.search-wrap .tips>span:nth-of-type(1) {
    margin-right: 16rem;
}

.sequence .broadcast {
    width: 113rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0px 10rem 10rem 0px;
    position: absolute;
    top: calc(50% - 178rem);
    right: -113rem;
    text-align: center;
    padding: 10rem 10rem 20rem;
}

.sequence .broadcast>.label {
    padding: 10rem 0;
    color: #5F6574;
    font-size: 16rem;
}

.sequence .close {
    margin: 16rem 0 20rem;
    cursor: pointer;
}

.cancel {
    width: 80rem;
    height: 30rem;
    background: rgba(236, 243, 255, 0.39);
    border: 1px solid #576FFA;
    color: #576FFA;
    text-align: center;
    line-height: 30rem;
    margin: 0 auto;
    cursor: pointer;
}

.sequence .sequence-success {
    display: block;
    margin: 106rem auto 0;
    height: 132rem;
    width: 436rem;
}

/* 拼写强化 */
.intensify-mask {
    /* display: block; */
}

.intensify>.header-line {
    height: 4rem;
    background: rgba(87, 111, 250, 1);
    border-radius: 10rem;
    margin: 10rem 0 0;
}

.intensify .start-card {
    width: 826rem;
    height: 306rem;
    border: 1rem solid #FFFFFF;
    background: linear-gradient(135deg, #FFFFFF 0%, #ECF3FF 46%, #FFFFFF 100%);
    box-shadow: 0px 3rem 10rem rgba(40, 51, 75, 0.2);
    border-radius: 10rem;
    margin: 101rem auto 60rem;
    font-size: 30rem;
    position: relative;
}

.intensify .start-card .tips {
    padding: 14rem 0 0;
}

.intensify .before-dot {
    line-height: 1.4;
    position: relative;
}

.intensify .before-dot::before {
    position: absolute;
    left: -30rem;
    bottom: -20rem;
}

.intensify .btn {
    width: 135rem;
    height: 44rem;
    background: rgba(87, 111, 250, 1);
    border: 1rem solid #576FFA;
    color: #fff;
    border-radius: 6rem;
    text-align: center;
    line-height: 44rem;
    margin: 0 5rem 0;
    cursor: pointer;
}

.intensify .btn-inverse {
    background-color: #fff;
    border-color: #97A5B7;
    color: #333;
}


/* 竞赛弹窗 */
.competition-mask {
    /* display: block; */
}

.competition>.tips {
    font-size: 15rem;
    position: relative;
    padding: 20rem 20rem 0;
    color: #666;
}

.competition>.tips::after {
    content: "";
    position: absolute;
    width: 4rem;
    height: 21rem;
    background: #576FFA;
    border-radius: 2rem;
    left: 0;
    top: calc(50% - .5rem);
}

.competition-vs-wrap {
    padding: 60rem 0 60rem;
}

.competition-vs-wrap>.item {
    padding: 0 30rem;
}

.competition-vs-wrap>.item .color_e8a8 {
    transform: skew(-30deg);
}

.competition>.competition-footer>.competition-btn {
    padding: 8rem 40rem;
    margin: 0 10rem;
    border: 1rem solid #576FFA;
    background-color: #576FFA;
    border-radius: 4rem;
    color: #fff;
    cursor: pointer;
}

.competition .competition-wrap {
    overflow-x: hidden;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 14rem;
    grid-column-gap: 14rem;
    width: 100%;
    max-height: 100%;
}

.competition .competition-wrap .competition-card {
    height: 90rem;
    padding: 10rem 30rem;
    cursor: pointer;
    background: linear-gradient(134deg, #878C97 0%, #5F6574 100%);
    position: relative;
}

.competition .competition-wrap .competition-card .iconfont {
    color: #fff;
    position: absolute;
    right: 7rem;
    bottom: 7rem;
}

.competition .competition-wrap .competition-success {
    border-radius: 10rem;
    background: linear-gradient(134deg, #C1E6FF 0%, #A6D6F6 100%);
}

.competition .competition-wrap .competition-success .iconfont {
    width: 20rem;
    height: 20rem;
    border: 1rem solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13rem;
}

.competition .competition-wrap .competition-card>.icon {
    width: 49rem;
    height: 49rem;
    margin-right: 15rem;
}

.competition .competition-wrap::-webkit-scrollbar {
    width: 0;
}

.competition .competition-wrap::scrollbar {
    width: 0;
}

.competition>.competition-footer {
    padding: 30rem 0 20rem;
}

.competition>.competition-footer>.competition-close {
    background-color: transparent;
    color: #666;
    border-color: #ccc;
}

/* DCL-T同步测试 */
.dcl-content {
    width: 100%;
    height: 100%;
}

.dcl-options-wrap {
    border: 1px solid #576FFA;
    margin: 32rem 38rem 0;
    border-radius: 8rem;
    position: relative;
    padding: 0 120rem;
}

.dcl-options-wrap::before {
    content: "测试选项";
    background-color: #576FFA;
    color: #fff;
    width: 30rem;
    height: 100rem;
    position: absolute;
    left: -30rem;
    top: 20rem;
    font-size: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-lr;
    letter-spacing: 4rem;
    cursor: pointer;
}

.dcl-options-title {
    padding: 20rem 0 70rem;
    font-size: 20rem;
}

.dcl-options-title span {
    margin: 0 4rem;
}

.dcl-options-title>.color_e8a8 {
    font-weight: bold;
}

.dcl-options-row {
    padding-bottom: 10rem;
    line-height: 36rem;
}

.dcl-options-row>.label {
    width: 120rem;
}

.dcl-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 16rem;
}

.dcl-radio-group label {
    margin-left: 6rem;
    font-weight: bold;
}

.dcl-select {
    padding: 0 0 20rem;
}

.dcl-select select {
    width: 80%;
    padding: 5rem;
    border-color: #999;
    border-radius: 4rem;
}

.dcl-start {
    border: none;
    background-color: #576FFA;
    width: 240rem;
    text-align: center;
    color: #fff;
    font-size: 18rem;
    padding: 10rem 0;
    display: block;
    margin: 38rem auto 0;
    cursor: pointer;
    border-radius: 8rem;
}

/* DCL-T同步测试弹窗 */
.dcl-mask {
    /* display: block; */
}

.dcl-wrap {
    padding: 50rem 210rem 0;
}

.dcl-total-success::before,
.dcl-total-fail::before {
    font-size: 30rem;
    padding-right: 8rem;
}

.dcl-total-fail {
    margin-left: 40rem;
}

.dcl-slider-wrap {
    height: 20rem;
    background: #ECF3FF;
    border-radius: 10rem;
    margin: 20rem 0;
}

.dcl-slider {
    height: 20rem;
    background: #576FFA;
    border-radius: 10rem;
}

.dcl-word-now span {
    margin: 0 5rem;
}

.dcl-word-value {
    color: #576FFA;
    padding: 30rem 0 20rem;
    text-align: center;
}

.dcl-word-row {
    display: flex;
    align-items: center;
    padding: 0 30rem;
    height: 40rem;
    background: #F5F5F6;
    border: 1rem solid #D7D9DC;
    margin-top: 10rem;
}

.dcl-word-active {
    color: #fff;
    background: #576FFA;
    border-color: #576FFA;
}

.dcl-word-success {
    color: #fff;
    background: #71C4CC;
    border-color: #71C4CC;
}

.dcl-word-fail {
    color: #fff;
    background: #E8A8A8;
    border-color: #E8A8A8;
}

.dcl-tips {
    width: 349rem;
    height: 30rem;
    background: rgba(236, 243, 255, 1);
    text-align: center;
    line-height: 30rem;
    margin: 25rem auto 0;
}

.dcl-footer>.dcl-btn:nth-of-type(1) {
    color: #fff;
    background: #576FFA;
}

.dcl-btn {
    width: 135rem;
    height: 44rem;
    border: 1px solid #97A5B7;
    cursor: pointer;
    border-radius: 6rem;
    text-align: center;
    line-height: 44rem;
    margin: 0 10rem 20rem;
}

/* 同步测试结果 */
.dcl-result-mask {
    /* display: block; */
}

.dcl-reslut-option {
    padding: 30rem 0 56rem;
}

.dcl-reslut-option>div {
    margin: 0 10rem;
}

.dcl-reslut-option .f20 {
    line-height: 1.2;
    padding-right: 5rem;
}

.dcl-reslut-value {
    width: 258rem;
    height: 201rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    padding: 0px 8rem 50rem 0;
    font-size: 52rem;
    font-weight: bold;

    background-image: url(../images/dcl-result.png);
}

.dcl-reslt-tips {
    width: 340rem;
    margin: 20rem auto 40rem;
}

.dcl-reslut-label {
    padding: 5rem 0 0;
}

.dcl-reslut-footer {
    padding: 55rem 0 0;
}

/* 同步测试隐藏词义 */
.dcl-none-mask {
    /* display: block; */
}

.dcl-none-word {
    padding: 40rem 0 50rem;
}

.dcl-none-btn {
    width: 135rem;
    height: 44rem;
    cursor: pointer;
    border-radius: 6rem;
    text-align: center;
    line-height: 44rem;
    background: #576FFA;
    color: #fff;
    margin-right: 20rem;
}

.dcl-none-row>input {
    border: 2rem solid #576FFA;
    padding: 5rem 10rem;
    outline: none;
    margin: 0 20rem;
    border-radius: 4rem;
}

.dcl-none-row>.btn {
    width: 140rem;
    height: 40rem;
    border-radius: 4rem;
    background-color: #576FFA;
    color: #fff;
    text-align: center;
    line-height: 40rem;
    cursor: pointer;
}

.dcl-none-tips {
    padding: 16rem 0;
}

/* DCL-T同步测试结果分析 */
.dcl-analyze-mask {
    display: none;
}

.dcl-analyze {
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 20rem 100rem 20rem;
    margin: 0 0 24rem;
}

.dcl-analyze::-webkit-scrollbar {
    width: 0;
}

.dcl-analyze::scrollbar {
    width: 0;
}

.dcl-analyze .analyze-title {
    font-size: 18rem;
    font-weight: bold;
    padding: 32rem 0 8rem;
    border-bottom: 1rem solid #576FFA;
    margin: 0 0 40rem;
}

.dcl-analyze .user {
    padding: 0 0 8rem;
}

.dcl-analyze .user .avatar {
    width: 120rem;
    height: 120rem;
    border-radius: 50%;
    margin-right: 46rem;
}

.dcl-analyze .user .align-center {
    padding: 10rem 0;
}

.dcl-analyze .user .iconfont {
    margin-right: 10rem;
}

.dcl-analyze>.analyze-row {
    padding: 5rem 0;
    text-align: left;
}

.dcl-analyze>.analyze-row>.analyze-label {
    width: 130rem;
    padding-right: 6rem;
}

.dcl-analyze>.analyze-row>.analyze-value {
    padding: 0;
}

.dcl-analyze .analyze-tips {
    min-height: 240rem;
    position: relative;
    padding: 32rem 26rem;
    border: 1rem solid #efefef;
    margin: 46rem 0 0;
    line-height: 1.5;
}

.dcl-analyze .analyze-tips>.analyze-tips-top,
.dcl-analyze .analyze-tips>.analyze-tips-bottom {
    position: absolute;
    background-color: #576FFA;
    border-radius: 4rem;
    padding: 4rem 14rem;
    cursor: pointer;
    color: #fff;
}

.dcl-analyze .analyze-tips>.analyze-tips-top {
    top: -15rem;
    left: -30rem;
}

.dcl-analyze .analyze-tips>.analyze-tips-bottom {
    right: -30rem;
    bottom: -15rem;
}

/* 同步测试结果-参考提示 */
.dcl-refer-mask {
    /* display: block; */
}

.dcl-refer-label {
    line-height: 1;
    padding: 0 0 14rem;
}

.dcl-refer-btnRow {
    padding: 60rem 0;
}

.dcl-refer {
    border: 1rem solid #ededed;
    padding: 32rem 20rem;
    margin: 0 64rem;
    border-radius: 4rem;
}

.dcl-refer-tips {
    padding: 0 0 20rem;
    border-bottom: 1rem solid #ededed;
}

.dcl-refer-wrapper {
    padding: 20rem 0;
    max-height: 200rem;
    overflow-y: scroll;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 20rem;
    grid-column-gap: 20rem;
}

.dcl-refer-wrapper::-webkit-scrollbar {
    width: 0;
}

.dcl-refer-wrapper::scrollbar {
    width: 0;
}

.dcl-refer-wrapper>.align-center {
    height: 40rem;
    width: auto;
    line-height: 40rem;
}

.dcl-refer-wrapper .dcl-refer-item {
    background-color: #576FFA;
    color: #fff;
    height: 40rem;
    padding: 0 12rem;
    border-radius: 4rem 0 0 4rem;
}

.dcl-refer-value {
    padding: 0 12rem;
    color: #576FFA;
    border: 1rem solid #576FFA;
    height: 40rem;
    line-height: 40rem;
    border-left: none;
    border-radius: 0 4rem 4rem 0;
}

/* 预留模块 */
.happly-study {
    width: 40%;
}

/* 学习报告 */
.report-wrapper[data-report] {
    display: none;
}

.report-wrapper[data-report="7"] {
    display: block;
}

.echarts-wrap {
    padding: 26rem 0 0;
}

.report-table {
    width: 100%;
    height: 100%;
}


.report-thead {
    border-radius: 6rem 6rem 0 0;
    background-color: #f0f0f0;
    border: 1rem solid #e0e0e0;
    border-bottom: none;
    font-size: 15rem;
    font-weight: bold;
}

.report-table-body {
    margin: 0 -.5px 40rem;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1rem solid #e0e0e0;
    border-radius: 0 0 6rem 6rem;
}

.report-table-body>.report-tr:nth-last-of-type(1)>div {
    border-bottom: none;
}

.report-table-body>.report-tr:nth-of-type(1)>div {
    border-top: none;
    margin-top: 0;
}

.report-table-body::-webkit-scrollbar {
    width: 0;
}

.report-table-body::scrollbar {
    width: 0;
}

.report-calendar {
    display: grid;
    text-align: center;
    grid-template-columns: .5fr 1.2fr 1.5fr 1.6fr 1.2fr 1fr .5fr .5fr;
}

.report-type {
    display: grid;
    text-align: center;
    grid-template-columns: .5fr 1.5fr 1.8fr 1.2fr 1fr .5fr .5fr;
}

.report-time {
    display: grid;
    text-align: center;
    grid-template-columns: .5fr 1.5fr .8fr 1fr 1fr;
}

.report-calendar>div,
.report-time>div,
.report-type>div {
    padding: 8rem 2rem;
}

.report-tr>div {
    border: 1rem solid #e0e0e0;
    margin: -0.5px;
}


.report-wrapper-more {
    padding: 50rem 10rem;
    text-align: center;
    color: #576FFA;
}

.report-option {
    padding: 10rem 0 30rem;
}

.report-option select {
    margin: 0 16rem;
    padding: 5rem 3rem;
    border-color: #999;
    font-size: 15rem;
    border-radius: 4rem;
}

.report-search {
    width: 120rem;
    padding: 6rem 0;
    text-align: center;
    background-color: #576FFA;
    color: #fff;
    cursor: pointer;
    border-radius: 6rem;
    letter-spacing: 3rem;
}

.report-sum-up {
    border: 1px solid #e0e0e0;
    margin: 10rem auto 40rem;
    position: relative;
    padding: 30rem 50rem;
    width: 700rem;
}

.report-sum-row {
    display: grid;
    grid-template-columns: 1fr .6fr;
    border-bottom: 1px solid #e0e0e0;
    text-align: center;
    padding: 12rem 0;
}

.report-sum-tips {
    background-color: #576FFA;
    color: #fff;
    width: 30rem;
    height: 90rem;
    writing-mode: vertical-lr;
    text-align: center;
    line-height: 30rem;
    border-radius: 3rem;
    position: absolute;
    top: 20rem;
    left: -15rem;
}

/* 进入网站默认弹窗 */
.default-mask {
    display: none;
}

.default-mask>.dcl {
    position: relative;
}

.default-mask>.dcl>.lltuichu {
    position: absolute;
    top: 24rem;
    right: 32rem;
    cursor: pointer;
}

.default-header {
    padding: 30rem 0 10rem;
}

.default-header .avatar {
    width: 120rem;
    height: 120rem;
    display: block;
    margin-right: 20rem;
}

.default-header .username {
    padding: 0 0 8rem;
}

.default-header .default-count {
    margin-left: 82rem;
    text-align: center;
}

.default-header .default-count>div:nth-of-type(1) {
    padding: 0 0 8rem;
}

.default-header>div.flex-wid {
    margin-left: 122rem;
}

.default-header-btn {
    width: 170rem;
    height: 36rem;
    background-color: #576FFA;
    color: #fff;
    text-align: center;
    line-height: 36rem;
    border-radius: 6rem;
    margin: 10rem 0 0;
    letter-spacing: 2rem;
    cursor: pointer;
}

.default-tips {
    background-color: #576FFA;
    color: #fff;
    margin: 10rem 0 0;
    padding: 7rem 10rem;
    border-radius: 20rem;
}

.default-tips::before {
    font-size: 20rem;
    margin-right: 8rem;
}

.default-tips>span:nth-of-type(2) {
    margin: 0 4rem;
    font-size: 20rem;
    font-weight: bold;
    color: #E8A8A8;
}

.default-no-more {
    display: block;
    margin: 150rem auto 8rem;
}

.default-hide {
    display: none;
}

.default-swiper {
    display: grid;
    grid-template-columns: 80rem auto 80rem;
    padding: 100rem 0 20rem;
    position: relative;
}

.swiper-tips {
    position: absolute;
    top: 40rem;
    left: 0;
    font-size: 20rem;
}

.carousel-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 16rem;
    border: 1rem solid #576FFA;
    /* position: relative; */
}

.carousel {
    height: 100%;
    display: flex;
    transition: transform 0.5s;
    /* 添加过渡效果 */
}

.carousel-item {
    flex: 0 0 100%;
    /* 调整项的宽度 */
    height: 100%;
    border-radius: 16rem;
    padding: 16rem;
    position: relative;
}

.carousel-btn {
    height: 100%;
    position: relative;
}

.carousel-btn>div {
    cursor: pointer;
    width: 50rem;
    height: 50rem;
    background-color: #f5f5f5;
    position: absolute;
    top: calc(50% - 25rem);
    text-align: center;
    line-height: 50rem;

    border-radius: 50%;
    font-size: 15rem;
    transition: .3s ease all;
    color: #999;
}

.carousel-btn>div:hover {
    color: #666;
}

.carousel-btn>div.carousel-prev {
    transform: rotate(90deg) scale(.7);
    left: 0;
}

.carousel-btn>div.carousel-next {
    right: 0;
    transform: rotate(-90deg) scale(.8);
}

.carousel .carousel-header {
    border-radius: 16rem 16rem 0 0;
    margin: -16rem -16rem 0;
    padding: 16rem;
    background-color: #576FFA;
    color: #fff;
    font-size: 18rem;
    font-weight: bold;
}

.carousel .carousel_cirlce-wrapper {
    padding: 32rem;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    margin: 0 24rem;
}

.carousel .carousel_cirlce-wrapper .carousel_cirlce {
    border-radius: 50%;
    padding: 20rem;
    box-shadow: 0px 0px 10rem #e5e5e5;
    text-align: center;
    width: 150rem;
    height: 150rem;
}

.default-swiper .swiper-btn {
    width: 134rem;
    height: 44rem;
    border: 1px solid #97A5B7;
    cursor: pointer;
    border-radius: 6rem;
    text-align: center;
    line-height: 44rem;
    color: #fff;
    background: #576FFA;
    position: absolute;
    left: calc(50% - 67rem);
    bottom: 20rem;
}


/* 记忆曲线 */
.ebbing-img {
    width: 45%;
}
.ebbing-label {
    width: 40%;
    font-size: 16rem;
    line-height: 1.5;
    padding: 100rem 0 0 32rem;
    text-indent: 2em;
}

.ebbing-tips {
    padding: 20rem 0 8rem;
    text-align: center;
}

.ebbing-tips>span {
    margin: 0 2rem;
}

/* 例句强化 */
.sentence-mask {
    /* display: block; */
}

.template>.sequence {
    position: relative;
}

.sentence-word>span:nth-of-type(2) {
    padding-top: 16rem;
}

.sentence-row {
    padding-bottom: 18rem;
}

.sentence-row:nth-of-type(1) {
    padding-top: 40rem;
}

.sentence-card {
    width: 656rem;
    margin: 0 auto;
    background: linear-gradient(134deg, #FFFFFF 0%, #ECF3FF 45%, #FFFFFF 100%);
    box-shadow: 0px 3rem 6rem rgba(40, 51, 75, 0.2);
    padding: 0 32rem;
    text-align: center;
}

.sentence-value-title {
    font-size: 14rem;
    padding: 10rem 0;
}

.sentence-value {
    padding: 0 0 5rem;
}

.sentence-card>.pronounce-wrap {
    padding: 20rem 0 12rem;
}

.template .recording-card {
    right: 0;
}

.template .review-action {
    padding-top: 36rem;
}

.template .review-action .review-change {
    position: relative;
    left: 0;
}

.template .review-star>.iconfont {
    font-size: 38rem;
    margin: 26rem 12rem 0;
}

.template .review-star>.reivew-success-icon {
    position: relative;
    width: calc(35rem * 0.7);
    height: calc(40rem * 0.7);
    right: -80rem;
    top: 10rem;
}

.sentence-grade {
    line-height: 1;
    padding: 30rem 0 0;
}

.sentence-grade-icon {
    width: 17rem;
    height: 20rem;
    margin: 0 10rem 0 20rem;
    display: block;
}

.sentence-timer {
    position: absolute;
    top: 160rem;
    right: 32rem;
}

/* 自主测试 */
.autonomously-mask {
    /* display: block; */
}

.autonomously-mask>.dcl {
    padding-bottom: 30rem;
}

.autonomously-mask>.dcl>.dcl-options-wrap {
    padding-top: 30rem;
}

/* 录入卡号 */
.enter-mask {
    display: none;
}

.enter-wrapper {
    width: 500rem;
    border-radius: 16rem;
    background: linear-gradient(135deg, #E8F3F4 0%, #E1EEF6 37%, #FFFFFF 100%);
    position: absolute;
    left: calc(50% - 250rem);
    top: calc(50% - 120rem);
    padding: 38rem 32rem 20rem;
}

.enter-wrapper>div.align-center:nth-of-type(2) {
    margin-top: 20rem;
}

.enter-wrapper .input-wrap {
    background-color: #fff;
    border-radius: 6rem;
    overflow: hidden;
    margin-left: 10rem;
}

.enter-wrapper .input-wrap>input {
    padding: 10rem 12rem;
    border: none;
    outline: none;
    font-size: 16rem;
}

.enter-wrapper .input-wrap .iconfont {
    margin: 0 10rem;
}

.enter-wrapper .tips {
    text-align: center;
    padding: 40rem 0 10rem;
}

.enter-wrapper .tips::before {
    margin-right: 4rem;
}

.enter-btn {
    background-color: #576FFA;
    color: #fff;
    font-size: 16rem;
    font-weight: bold;
    cursor: pointer;
    border-radius: 8rem;
    padding: 12rem 0;
    text-align: center;
    width: 240rem;
    margin: 0 auto;
}

.prepare-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .15);
    left: 0;
    top: 0;
}

.prepare-mask>.circle {
    width: 180rem;
    height: 180rem;
    font-size: 46rem;
    color: #fff;
    border-radius: 50%;
    font-weight: bold;
    background-color: rgba(0, 0, 0, .22);
}

.prepare-mask>.circle::after {
    content: "";
    animation: prepareMove 3s forwards;
    opacity: 0;
}

@keyframes prepareMove {
    30% {
        content: 'Ready';
        opacity: 1;
    }

    50% {
        content: "Ready";
        opacity: 0;
    }

    51% {
        content: '';
        opacity: 0;
    }

    52% {
        content: 'Go!';
        opacity: 0;
    }

    80% {
        content: 'Go!';
        opacity: 1;
    }

    100% {
        content: 'Go!';
        opacity: 1;
    }
}


.subscription-box .subscription-success-exam {
    border-radius: 10rem;
    background: linear-gradient(134deg, #10d31f 0%, #A6D6F6 100%);
}

.subscription-box .subscription-success-wrong {
    border-radius: 10rem;
    background: linear-gradient(134deg, #e00d69 0%, #A6D6F6 100%);
}

.subscription-box .subscription-success-spell {
    border-radius: 10rem;
    background: linear-gradient(134deg, #2e91ee 0%, #A6D6F6 100%);
}

.subscription-box .subscription-success-zizhu {
    border-radius: 10rem;
    background: linear-gradient(134deg, #f67b22 0%, #A6D6F6 100%);
}

.subscription-box .subscription-success-wrong-spell {
    border-radius: 10rem;
    background: linear-gradient(134deg, #12e1bb 0%, #A6D6F6 100%);
}

.subscription-box .subscription-success-lingdu {
    border-radius: 10rem;
    background: linear-gradient(134deg, #9c0bfd 0%, #f6078d 100%);
}

.vocabulary-search>.tag2 {
    height: 26rem;
    border-radius: 3rem;
    margin: 0 5rem;
    text-align: center;
    line-height: 26rem;
    color: #fff;
    cursor: pointer;
}

.vocabulary-card2>.tips2 {
    padding: 5rem 0 15rem;
}


.vocabulary-card2 {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10rem;
    width: 100%;
    height: 252rem;
    border-radius: 10rem;
    background: linear-gradient(133deg, #1e7bfd 0%, #59b2e8 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    backface-visibility: hidden;
    /* 隐藏背面 */
}

.vocabulary-wrap2 {
    margin: 30rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-row-gap: 121rem;
    grid-column-gap: 20rem;
    overflow-x: hidden;
    overflow-y: scroll;
}


.star-animation>.iconfont {
    animation: starScaleRoate .5s;
    transform: scale(.4);
    animation-fill-mode: forwards;
}

.star-animation>.iconfont:nth-child(2) {
    animation-delay: .07s;
}

.star-animation>.iconfont:nth-child(3) {
    animation-delay: .14s;
}

.star-animation>.iconfont:nth-child(4) {
    animation-delay: .21s;
}

.star-animation>.iconfont:nth-child(5) {
    animation-delay: .28s;
}

@keyframes starScaleRoate {
    0% {
        transform: scale(.4) rotate(-0deg);
    }

    50% {
        transform: scale(1.1) rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.progress-container {
    width: 90rem;
    height: 90rem;
    position: relative;
    margin-bottom: 20rem;
}

.progress-container .progress-circle {
    transform: rotate(-90deg);
    height: 100%;
    width: 100%;
}

.progress-container .progress-bg {
    fill: none;
    stroke: #f0f0f0;
    stroke-width: 5;
}

.progress-container .progress-value {
    width: 56rem;
    height: 56rem;
    border-radius: 50%;
    position: absolute;
    left: 17rem;
    top: 17rem;
    background-color: #E0EFF2;
    margin: 0 !important;
    font-size: 55rem !important;
}

.progress-container .progress-fill {
    fill: none;
    stroke: #576FFA;
    stroke-width: 5;
    stroke-dasharray: 339.292;
    /* 圆周长 (2 * π * 半径) */
    stroke-dashoffset: 0;
    animation: progressAnimation 5s linear forwards;
}

@keyframes progressAnimation {
    0% {
        stroke-dashoffset: 339.292;
    }

    100% {
        stroke-dashoffset: 0;
    }
}


.study-btn {
    top: 256rem;
}

.study-review {
    top: 320rem;
}

.fixed-btn {
    position: fixed;
    left: 0;
    cursor: pointer;
    padding: 10rem 10rem 10rem 2rem;
    background: #576FFA;
    /* border: 1rem solid #e5e5e5; */
    border-left: none;
    border-radius: 0 25rem 25rem 0;
    color: #fff;
    /* letter-spacing: 1rem; */
    font-size: 16rem;
    min-width: 40rem;
    height: 50rem;
    text-align: center;
}

.fixed-btn>.txt {
    overflow: hidden;
    width: 0;
    transition: .3s ease all;
    white-space: nowrap;
}

.fixed-btn .iconfont {
    font-size: 18rem;
}

.fixed-btn:hover {
    /* width: 120rem; */
}

.fixed-btn:hover>.txt {
    width: 74rem;
}